<template>
  <div class="header">
    <img src="@/assets/images/logo.png" alt />
    <span class="iconfont icon-caidan" @click="show"></span>
    <cube-drawer
      ref="drawer"
      title="请选择"
      :data="categories"
      @select="selectHandler"
    ></cube-drawer>
  </div>
</template>
<script>
export default {
    props:{
        category:{
            type:Array,
            default:()=>[]
        }
    },
    computed:{ 
        categories(){
            let defaultActive = [{text:"全部课程",value:-1}];
            return this.category.length>0 ? [[...defaultActive,...this.category]]:[defaultActive]
        }
    },
  methods:{
      show(){
           this.$refs.drawer.show()
      },
      selectHandler(value){
          this.$emit('change',value)
      }
  }
}
</script>
<style lang="stylus" >
.header {
  height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #2a2a2a;
}

.logo {
  width: 150px;
}

.icon-caidan {
  color: #fff;
  font-weight: bold;
}
</style>